<template>
    <div class="dialog-edit">
        <el-dialog
            title="编辑"
            :visible.sync="ifShowDialog"
        >
            <el-form
                ref="form"
                :model="form"
                label-width="80px"
            >

                <el-form-item
                    label="信息名称"
                >
                    <el-input v-model="form.infoName"></el-input>
                </el-form-item>

                <el-form-item
                    label="所属类别"
                >
                    <el-select @change="chooseBelong" v-model="form.belong" placeholder="请选择" style="float:left">
                        <el-option
                        v-for="item in allBelong"
                        :key="item.value"
                        :label="item.label"
                        v-show="item.isShow"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item
                    label="信息类型"
                >
                    <el-select v-model="form.infoType" placeholder="请选择" style="float:left">
                        <el-option
                        v-for="item in allType"
                        :key="item.value"
                        :label="item.label"
                        :disabled="item.disabled"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="证件图标" v-if="form.infoType === 'image'">
                   <el-select v-model="form.iconName" style="float: left">
                        <el-option
                            v-for="(item, index) in allIcon"
                            :key="index"
                            :label="item.label"
                            :value="item.value"
                        >
                            <span class="iconfont" :class="item.value" style="color: gray"></span>
                            <span style="color: gray; font-size: .25rem">{{ item.label }}</span>
                        </el-option>   
                    </el-select> 
                </el-form-item>

                <el-form-item label="可选值" v-if="form.infoType === 'enum'">
                    <div class="enum-box">
                        <el-input 
                        v-for="(item, index) in form.chooseValue"
                        :key="index"
                        v-model="form.chooseValue[index]"
                        style="width: 120px;margin:0 0 10px 10px"
                        ></el-input>
                       <i @click="addEnumValue" class="el-icon-circle-plus-outline" style="cursor: pointer;font-size: 30px;margin: 5px 0 0 10px"></i>
                       <i @click="reduceEnumValue" class="el-icon-remove-outline" style="cursor: pointer;font-size: 30px;margin: 5px 0 0 10px"></i>
                    </div>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="confirm">修改</el-button>
                    <el-button @click="cancel">取消</el-button>
                </el-form-item>

            </el-form>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'DialogEdit',
    data () {
        return {
            ifShowDialog: false,
            allType: [{
                label: '文字类型',
                value: 'text',
                disabled: false
            }, {
                label: '可选列表类型',
                value: 'enum',
                disabled: false
            }, {
                label: '图片类型',
                value: 'image',
                disabled: false
            }, {
                label: '日期类型',
                value: 'date',
                disabled: false
            }, {
                label: '身份证号类型',
                value: 'idcard',
                disabled: false
            }, {
                label: '数字类型',
                value: 'number',
                disabled: false
            }],
            allIcon: [
                { label: '身份证正面', value: 'icon-shenfenzheng'},
                { label: '身份证背面', value: 'icon-shenfenzheng1'},
                { label: '其他证书', value: 'icon-pingzhengmingxi'}
            ],
            allBelong: [{
                label: '基本信息',
                value: 'basic',
                isShow: true
            }, {
                label: '专家信息',
                value: 'expert',
                isShow: true
            }, {
                label: '证件信息',
                value: 'photo',
                isShow: true
            }],
            form: {
                id: '',
                belong: '',
                iconName: '',
                chooseValue: [],
                infoName: '',
                infoType: '',
                kindName: ''
            },
            
        }
    },
    methods: {
        chooseBelong (belong) {
            this.form.infoType = '';
            this.form.iconName = '';
            this.belong = belong;
            var form = JSON.parse(JSON.stringify(this.form));
            this.form = null;
            this.form = form;
            
            this.resetAllType();
        },
        resetAllType () {
            //处理信息分类, 图片类信息只可显示证件信息类型
            var form = this.form;
            var allType = this.allType;
            allType.forEach((el, index) => {
                if (form.belong === 'photo') {
                    allType[index].disabled = el.value !== 'image';
                }
                else {
                    allType[index].disabled = el.value === 'image';
                }
            });
            this.allType = allType;
        },
        listenRoute () {
            var param = this.$route.query.param;
            if (param) {
                //非基本信息
                var allBelong = this.allBelong;
                allBelong.forEach((el, index) => {
                    allBelong[index].isShow = el.value !== 'basic';
                });
                this.allBelong = allBelong;
            }
            else {
                //基本信息

                var allBelong = this.allBelong;
                allBelong.forEach((el, index) => {
                    allBelong[index].isShow = el.value === 'basic';
                });
                this.allBelong = allBelong;
            }

            //处理所有类型
            this.resetAllType();
            
        
        },
        show (form) {
            form.chooseValue = !form.chooseValue ? [] : form.chooseValue;
            console.log(form)
            this.form = form;
            this.ifShowDialog = true;
            this.listenRoute();
        },
        checkForm () {
            var form = this.form;
            if (!form.infoName) {
                console.log("信息名称未填写");
                return false;
            }
            if (!form.belong) {
                console.log("信息所属未填写");
                return false;
            }
            if (!form.infoType) {
                console.log("信息类型未填写");
                return false;
            }
            if (form.infoType === 'enum' && form.chooseValue.length === 0) {
                console.log("可选列表未填写");
                return false;
            }
            if (form.belong === 'photo' && !form.iconName) {
                console.log("证件图标未填写");
                return false;
            }
            return true;
        },
        confirm () {
            
            if (!this.checkForm()) {
                this.$message({
                    message: '请填写完整',
                    type: 'warning'
                });
                return;
            }
            this.ifShowDialog = false;
            this.$emit('editCertifyNeed', this.form);
        },
        cancel () {
            this.ifShowDialog = false;
        },
        addEnumValue () {
            this.form.chooseValue.push('')
        },
        reduceEnumValue () {
            this.form.chooseValue.pop()
        }
    }
}
</script>

<style lang="stylus" scoped>
    .dialog-edit
        width 100%
        .enum-box
            width 100%
            display flex
            flex-wrap wrap
</style>


